<template>
	<view class="xzy-popup">
		<uv-action-sheet ref="orderSelectRef" :actions="props.actions" :title="props.title" round="10">
			<view class="selet-box" v-if="type === 'gradeSheet' || type === 'ServerRegionSheet'"
				:style="`height: ${sheetHeight};`">
				<!-- 垂直选项卡 -->
				<uv-vtabs :chain="false" :height="sheetHeight" :list="props.actions" :current="curIndex"
					:barItemBadgeStyle="{right:'20px',top:'12px'}" @change="change"
					:keyName="type === 'gradeSheet' ? 'name' : 'regionName'">
					<!-- 段位 -->
					<uv-vtabs-item v-if="type === 'gradeSheet'">
						<block v-for="(item,index) in list" :key="index">
							<view v-if="item.startNum * 1 <= item.endNum * 1"
								:class="`${item.isLoop * 1 === 1 ? 'item' : (item.isInput * 1 === 1 && item.qualifyTag * 1 === 1) ? 'item' : 'item newItem'}`">
								<view class="item-title" v-if="item.isLoop * 1 === 1">
									<text class="text">{{item.name}}</text>
								</view>
								<!-- 是否循环创建子集 -->
								<view class="item-content" v-if="item.isLoop * 1 === 1">
									<view class="item-flex" v-for="(i,j) in (item.endNum - item.startNum + 1)"
										@click='handleClick(item,item.startNum * 1 + j, type)' :key="j">
										<view class="item-star"
											v-if="item.qualifyTag * 1 === 1 || item.qualifyTag * 1 === 3 || !item?.qualifyTag">
											{{item.startNum * 1 + j}}{{item.unit}}
										</view>
										<block v-else>
											<view class="item-star" v-if="item.startNum * 1 + j !== 0">
												{{item.startNum * 1 + j}}{{item.unit}}
											</view>
										</block>
									</view>
								</view>
								<view v-else-if="item.isInput * 1 === 1 && item.qualifyTag * 1 === 1" :key="'child1_' + index"
									style="width: 100%;">
									<view class="ipt" v-if="index === 0">
										<uv-number-box v-model="item.inputValue" inputWidth="100" integer @blur="iptBlur"
											:max="item.endInput"></uv-number-box>
										<view class="unit">{{item.unit}}</view>
									</view>
									<view v-if="index === 0" class="multipleBtn" style="width: 100%;"
										@click="handleClick(item, item.name, type)">
										确定
									</view>
								</view>
								<view v-else style="width: 100%;" @click='handleClick(item, item.name, type)' :key="'child2_' + index">
									{{item.name}}
								</view>
							</view>
						</block>
					</uv-vtabs-item>
					<!-- 区服 -->
					<uv-vtabs-item v-if="type === 'ServerRegionSheet'">
						<view class="item" v-for="(item,index) in list" :key="index">
							<view class="item-content">
								<view class="item-flex" @click='handleClick(item,j, type)'>
									<view class="item-star">
										{{ item.regionName }}
									</view>
								</view>
							</view>
						</view>
					</uv-vtabs-item>
				</uv-vtabs>
			</view>
			<!-- 索引列表 -->
			<view v-if="type === 'index'" :style="`height: ${sheetHeight};position: relative;`">
				<xzy-index-list :isHotCity="false" :isCurrentCity="false" :letters="props.actions[0]" :idValue="props.idValue"
					:nameValue="props.nameValue" :cityList="props.actions[1]" @city-click="handleHero" type="card">
				</xzy-index-list>
			</view>
			<!-- 单选 -->
			<view class="radio-box" v-if="type === 'radio'">
				<view :class="`item ${activeRadioItem?.id === item?.id ?'acive-item' : ''}`"
					v-for="(item,index) in props.actions" @click="activeRadio(item)" :key="index">
					<text :style="`font-weight: ${activeRadioItem?.id === item?.id ? 700 : 400}`">{{item.attributeName}}</text>
					<uv-icon v-if="activeRadioItem?.id === item?.id" name="checkbox-mark" color="#6F69E9" size="28"></uv-icon>
				</view>
			</view>
			<!-- 多选 -->
			<view class="radio-box" v-if="type === 'multiple'">
				<view :class="`item ${activeFilter.some(i => i?.id === item?.id) ?'acive-item' : ''}`"
					v-for="(item,index) in props.actions" @click="activeMultiple(item, index)" :key="index">
					<text
						:style="`font-weight: ${activeFilter.some(i => i?.id === item?.id) ? 700 : 400}`">{{item.attributeName}}</text>
					<uv-icon v-if="activeFilter.some(i => i?.id === item?.id)" name="checkbox-mark" color="#6F69E9"
						size="28"></uv-icon>
				</view>
				<view class="multipleBtn" @click="multipleSubmit">
					确定
				</view>
			</view>
		</uv-action-sheet>
	</view>
</template>
<script setup>
	import {
		ref,
		getCurrentInstance,
		computed,
		reactive,
		watch
	} from 'vue';

	const {
		ctx
	} = getCurrentInstance()


	const props = defineProps({
		title: String, //	标题
		type: { //	类型 gradeSheet-段位 ServerRegionSheet-区服 index-索引列表 radio-单选 multiple-多选
			type: String,
			default: "sheet"
		},
		sheetHeight: { //	弹窗高度
			type: String,
			default: "800rpx"
		},
		nameValue: { //	索引列表使用，key名称
			type: String,
			default: "name"
		},
		idValue: { //	索引列表使用，id名称
			type: String,
			default: "id"
		},
		actions: { //	数据
			type: Array,
			require: true,
		},

		//	索引列表格式
		// actions: [[
		// 	"A", "B", "C"
		// ], {
		// 	"A": [{
		// 		"areaId": "152900",
		// 		"areaName": "阿拉善盟",
		// 	}],
		// 	"B": [{
		// 		"areaId": "110100",
		// 		"areaName": "北京市",
		// 	}],
		// 	"C": [{
		// 		"areaId": "130800",
		// 		"areaName": "承德市",
		// 	}]
		// }]
	})
	const orderSelectRef = ref() //组件实例
	const attributeName = ref("") //每个input框的key
	//选择段位
	const curIndex = ref(0)
	//	段位数据
	const list = computed(() => {

		if (props.actions) {
			props.actions.forEach(item => {
				item.childList?.forEach(i => {
					i.isLoop = item.isLoop //	是否循环创建子集
					i.unit = item.unit //	单位-星、分、钻 等
					i.isInput = item.isInput //	是否显示输入框
					i.qualifyTag = item.qualifyTag //	1-起始段位 2-截止段位
					i.startInput = item.startInput * 1 //	输入框最小输入值
					i.endInput = item.endInput * 1 //	输入框最大输入值
					i.parentSort = item.sort //	父级排序
					i.label = item.name //	父级名称
					i.rect = item.rect
				})
			})
		}

		const _list = props.actions[curIndex.value]?.childList
		return _list ? _list : []
	})

	const emits = defineEmits(["checked"])

	//	段位切换事件
	const change = (index) => {
		curIndex.value = index
	}

	// 段位选择输入框失焦事件
	const isInputVal = ref(true)

	function iptBlur(e) {
		isInputVal.value = !!e.value
	}

	//	段位选择
	const handleClick = (item, starNum, type) => {

		if (!isInputVal.value) {
			uni.$uv.toast("数值不能为空")
			return
		}

		//	必须为数字输入框 且有最大最小值
		if (item.isLoop * 1 !== 1 && item.isInput * 1 === 1 && item.qualifyTag * 1 === 1) {
			if ((item.startInput && item.startInput * 1 > 0) && (!item.inputValue || (item.inputValue * 1 < item
					.startInput * 1))) {
				uni.$uv.toast(`数值最小为${item.startInput}`)
				item.inputValue = item.startInput
				return
			}
		}
		if (!item.inputValue) item.inputValue = 1
		emits("checked", {
			key: attributeName.value === "childKey" ? item.keyPairs : attributeName.value,
			val: type === 'gradeSheet' ?
				`${item.isLoop * 1 === 1 ? (item.name.indexOf("王者") > -1 ? item.label : item.name) + ' ' + starNum + item.unit : item.isInput * 1  === 1 && item.qualifyTag * 1 === 1 ? item.label + item.inputValue + item.unit : item.name}` :
				item.unit ? item.inputValue + item.unit : item.id,
			type: props.type,
			data: {
				activeNum: starNum,
				...item
			}
		})

		orderSelectRef.value.close()
	}

	//	打开弹窗		
	function open(val) { //	arge: 额外参数  beep 为没有参数
		if (curIndex.value * 1 > props.actions.length) {
			curIndex.value = 0
		}
		attributeName.value = val
		orderSelectRef.value.open()
	}

	//	选择英雄
	function handleHero(e) {
		emits("checked", {
			key: attributeName.value,
			val: e.heroName,
			type: props.type,
			data: e
		})
		orderSelectRef.value.close()
	}

	//	下拉框选择
	const activeRadioItem = ref({})

	function activeRadio(item) {
		activeRadioItem.value = item
		emits("checked", {
			key: attributeName.value === "childKey" ? item.keyPairs : attributeName.value,
			val: item.attributeName,
			type: props.type,
			data: item
		})
		orderSelectRef.value.close()
	}

	const activeFilter = ref([])

	function activeMultiple(item, index) {
		if (activeFilter.value.some(i => i?.id === item?.id)) {
			activeFilter.value = activeFilter.value.filter(i => i.id !== item.id)
		} else {
			activeFilter.value.push(item)
		}
	}

	function multipleSubmit() {
		let strArr = []
		activeFilter.value.forEach(item => {
			strArr.push(item.attributeName)
		})

		emits("checked", {
			key: attributeName.value === "childKey" ? item.keyPairs : attributeName.value,
			val: strArr.join(";"),
			type: props.type,
			data: activeFilter.value
		})

		orderSelectRef.value.close()
	}
	// 清空选择状态
	function clearSelections() {
		activeRadioItem.value = {}
	}
	defineExpose({
		open,
		clearSelections
	})
</script>
<style>
	:deep(.uv-index-list) {
		height: 100%;
	}
</style>
<style lang="scss" scoped>
	.header {
		padding: 30rpx;
		font-size: 30rpx;
		color: #333;
	}

	:deep(.uv-vtabs-item) {
		padding: 20rpx;
	}

	:deep(.uv-action-sheet__header) {
		padding: 40rpx;
	}

	:deep(.uv-action-sheet__header__title) {
		font-size: 32rpx;
	}

	:deep(.uv-action-sheet__header__icon-wrap) {
		top: 50rpx;
		right: 32rpx;

	}

	:deep(.uv-icon__icon) {
		font-size: 34rpx !important;
		color: #666 !important;
	}

	.item {
		padding: 10rpx 20rpx;
		display: flex;
		flex-direction: column;
		align-items: flex-start;

		.ipt {
			background: #f7f8fb;
			border-radius: 10rpx;
			padding: 20rpx 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.unit {
				margin-left: 20rpx;
				color: #c0c4cc;
				font-size: 35rpx;
			}
		}

		&-title {
			.text {
				font-weight: 700;
				font-size: 28rpx;
				color: #111;
			}
		}

		&-content {
			padding: 20rpx 0;
			display: flex;
			width: 100%;
			flex-wrap: wrap;

			.item-flex {
				display: grid;
				justify-content: stretch;
				flex-wrap: wrap;

				.item-star {
					background: #f7f8fb;
					padding: 10rpx 30rpx;
					margin: 20rpx 10rpx;
					color: #222222;
					border-radius: 10rpx;
				}
			}

		}
	}

	.newItem {
		padding: 10rpx 20rpx;
		display: flex;
		flex-direction: column;
		height: 60rpx;
		background: #f7f8fb;
		color: #222;
		margin: 20rpx 30rpx;
		border-radius: 10rpx;
		justify-content: center;
		align-items: center;
	}

	.gap {
		padding: 0 30rpx;
	}

	.radio-box {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		flex-wrap: wrap;

		.item {
			height: 40rpx;
			margin: 15rpx;
			text-align: left;
			display: flex;
			justify-content: space-between;
			flex-direction: row;
			align-items: center;
		}

		.acive-item {
			color: #6F69E9;
		}
	}

	.multipleBtn {
		width: 70%;
		margin: 40rpx auto 20rpx;
		border-radius: 10rpx;
		height: 70rpx;
		color: #fff;
		font-size: 30rpx;
		line-height: 70rpx;
		background: linear-gradient(270deg, #a7a1f6 0%, #6e68e9 100%);
	}
</style>